<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>STW OnLine</title>
	<link href="{{ MEDIA_URL }}css/layout.css" rel="stylesheet" type="text/css" />

	<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/DemoPortifolio.css" />
	<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/styleDemoPortifolio.css" />
	<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/jquery.jscrollpane.css" media="all" />

	<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}fancybox/jquery.fancybox-1.3.4.css" />
	<script src="{{ MEDIA_URL }}js/cufon-yui.js" type="text/javascript"></script>
	<script src="{{ MEDIA_URL }}js/ChunkFive_400.font.js" type="text/javascript"></script>
	<script type="text/javascript">
	/*Cufon.replace('h1',{ textShadow: '1px 1px #D1EF95'});
	Cufon.replace('h2',{ textShadow: '1px 1px #D1EF95'});
	Cufon.replace('.footer');*/
	</script>
    <!-- Script Barra-->
    <script type="text/javascript" src="{{ MEDIA_URL }}js/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="{{ MEDIA_URL }}js/BarraNews.js"></script>
    <script src="{{ MEDIA_URL }}js/Sytx.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="{{ MEDIA_URL }}css/BarraNews.css" type="text/css" media="screen" />

    <script type="text/javascript">
    $(function(){
        $("ul#ticker01").liScroll();
        $("ul#ticker02").liScroll({travelocity: 0.15});
    //Syntax
    $.syntax({root: 'js/'});

    });
</script>
    <!-- Fim Script Barra-->
</head>
<body>
	<div id="principal">
		<!-- Inicio Topo -->
		<div id="top">
			<div id="logo"> <a href="{% url fiduciam.views.homepage %}"><img src="{{ MEDIA_URL }}img/logo.png" alt="Logomarca STW"/></a>
			</div>
			<div id="imenu">
				<div id="items">
					<!-- Inicio menu -->
					<div id="menuLinks">
						<p class="menu"> <a href="{% url fiduciam.views.homepage %}">Home</a>   |  <a href="{% url fiduciam.views.noticias %}">Notícias</a>   |  <a href="{% url fiduciam.views.servicos %}">Serviços</a>   |  <a href="{% url fiduciam.views.portifolio %}">Portifólio</a>   |  <a href="{% url fiduciam.views.quemsomos %}">Quem Somos</a>   |  <a href="{% url fiduciam.views.contato %}">Contato</a></p>
					</div>
					<div id="effects">
					</div>
					<!-- Fim Menu -->


					<!--<script type="text/javascript" src="{{ MEDIA_URL }}js/jquery.min.js"></script>-->

					<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}js/lightbox/themes/default/jquery.lightbox.css" />
					<!--[if IE 6]>
					<link rel="stylesheet" type="text/css" href="js/lightbox/themes/default/jquery.lightbox.ie6.css" />
					<![endif]-->
					<!--<script type="text/javascript" src="{{ MEDIA_URL }}src/jquery.lightbox.js"></script>-->
					<script type="text/javascript" src="{{ MEDIA_URL }}js/lightbox/jquery.lightbox.min.js"></script>

					<script type="text/javascript">
					jQuery(document).ready(function($){
						$('.lightbox').lightbox();
					});
					</script>
				</div>
			</div>
			<div id="fimTop">
				<img src="{{ MEDIA_URL }}img/fim-menu_s1.png" />
			</div>
		</div><!-- Topo -->
		<!-- Fim topo  -->
        <div id="NoticiaContainer">
			<div id="imgNoticia"> <a href="{% url fiduciam.views.noticias %}"><img src="{{ MEDIA_URL }}img/ultimas.png" alt="none" /></a>
			</div>
			<div id="Noticia">
                <div class="gnb">
                                <ul id="ticker01">
                                    {% for noticias in noticias %}
                                            <li><span>{{ noticias.data|date:'d/m/y'}}</span><a href="{% url fiduciam.views.noticiainterna slug=noticias.slug %}">{{ noticias.titulo }}</a></li>
                                    {% endfor %}
                                </ul>
                </div>
            </div>
			</div>
	<div id="container">
		<div id="conteudo">

			<h1 class="NoticiasQ2"> Portifólio STW </h1>
			<div id="ca-container" class="ca-container">
				<div class="ca-wrapper">
					{% for portifolio in portifolio %}
					{% if portifolio.publicar %}
					<div class="ca-item ca-item-1">
						<div class="ca-item-main">
							<div class="ca-icon"><img src="/media/{{ portifolio.imagem_destaque }}" width="168" height="300" /></div>

							<h3>{{ portifolio.titulo }}</h3>
							<h4>
								<span class="ca-quote">&ldquo;</span>
                                <span>{{ portifolio.conteudo|safe }}</span>
							</h4>
							<a href="#" class="ca-more">Detalhes</a>
						</div>

						<div class="ca-content-wrapper">
							<div class="ca-content">
								<h6>{{ portifolio.titulo }}</h6>
								<a href="#" class="ca-close">Fechar</a>
								<div class="ca-content-text">
									<p>{{ portifolio.conteudo|safe }}</p>
								</div>
								<ul>
									<li><a target="_blank" href="{{ portifolio.link }}">{{ portifolio.titulo }}</a></li>

								</ul>
							</div>
						</div>
					</div>
					{% endif %}
					{% endfor %}
				</div>
			</div>
		</div>

		<!--<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>-->
		<script type="text/javascript" src="{{ MEDIA_URL }}fancybox/jquery.easing-1.3.pack.js"></script>
		<script type="text/javascript" src="{{ MEDIA_URL }}fancybox/jquery.fancybox-1.3.4.js"></script>
		<script type="text/javascript" src="{{ MEDIA_URL }}cloud-zoom/cloud-zoom.1.0.2.js"></script>

		<script type="text/javascript">
		$(function() {
			/*
			fancybox init on each cloud-zoom element
			*/
			$("#content .cloud-zoom").fancybox({
				'transitionIn'	:	'elastic',
				'transitionOut'	:	'none',
				'speedIn'		:	600,
				'speedOut'		:	200,
				'overlayShow'	:	true,
				'overlayColor'	:	'#000',
				'cyclic'		:	true,
				'easingIn'		:	'easeInOutExpo'
			});

			/*
			because the cloud zoom plugin draws a mousetrap
			div on top of the image, the fancybox click needs
			to be changed. What we do here is to trigger the click
			the fancybox expects, when we click the mousetrap div.
			We know the mousetrap div is inserted after
			the <a> we want to click:
			*/
			$("#content .mousetrap").live('click',function(){
				$(this).prev().trigger('click');
			});

			/*
			the content element;
			each list item / group with several images
			*/
			var $content	= $('#content'),
			$thumb_list = $content.find('.thumb > ul');
			/*
			we need to set the width of each ul (sum of the children width);
			we are also defining the click events on the right and left arrows
			of each item.
			*/
			$thumb_list.each(function(){
				var $this_list	= $(this),
				total_w		= 0,
				loaded		= 0,
				//preload all the images first
				$images		= $this_list.find('img'),
				total_images= $images.length;
				$images.each(function(){
					var $img	= $(this);
					$('<img/>').load(function(){
						++loaded;
						if (loaded == total_images){
							$this_list.data('current',0).children().each(function(){
								total_w	+= $(this).width();
							});
							$this_list.css('width', total_w + 'px');

							//next / prev events

							$this_list.parent()
							.siblings('.next')
							.bind('click',function(e){
								var current = $this_list.data('current');
								if(current == $this_list.children().length -1) return false;
								var	next	= ++current,
								ml		= -next * $this_list.children(':first').width();

								$this_list.data('current',next)
								.stop()
								.animate({
									'marginLeft'	: ml + 'px'
									},400);
									e.preventDefault();
								})
								.end()
								.siblings('.prev')
								.bind('click',function(e){
									var current = $this_list.data('current');
									if(current == 0) return false;
									var	prev	= --current,
									ml		= -prev * $this_list.children(':first').width();

									$this_list.data('current',prev)
									.stop()
									.animate({
										'marginLeft'	: ml + 'px'
										},400);
										e.preventDefault();
									});
								}
								}).attr('src',$img.attr('src'));
							});
						});
					});
					</script>
    <!--
					<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>-->

					<script type="text/javascript" src="{{ MEDIA_URL }}js/jquery.easing.1.3.js"></script>
					<!-- the jScrollPane script -->
					<script type="text/javascript" src="{{ MEDIA_URL }}js/jquery.mousewheel.js"></script>

					<script type="text/javascript" src="{{ MEDIA_URL }}js/jquery.contentcarousel.js"></script>
					<script type="text/javascript">
					$('#ca-container').contentcarousel();
					</script>

				</div>
				{% include "footer.html" %}
